import React, { Component } from 'react';
import { StyleSheet, View, ScrollView, Text, Alert, Image } from 'react-native';
import Menu from '../componments/Menu'

const source = require('../assets/source')

export default class Mine extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        let home_arrow = require('../assets/img/img/icon_cell_rightarrow.png');
        let avatar_enterprise_vip = require('../assets/img/img/avatar_enterprise_vip.png')

        let buttonlist = [
            [
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '我的钱包',
                    after: '办信用卡'
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '余额',
                    after: '￥0.00'
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '抵用券',
                    after: '0'
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '卡包',
                    after: '0'
                }
            ],
            [
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '好友去哪',
                    after: ''
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '我的评价',
                    after: ''
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '我的收藏',
                    after: ''
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '会员中心',
                    after: 'v4'
                },
                {
                    icon: require('../assets/img/my/pay.png'),
                    title: '积分商城',
                    after: '0元礼包已上线'
                }
            ]
        ]
        return (
            <View style={{ flex: 1, backgroundColor: '#f0f0f0' }}>
                <View style={styles.top}>
                    <Image style={styles.topicon} source={require('../assets/img/img/icon_homepage_message.png')}></Image>
                </View>
                <ScrollView>
                    <View style={styles.header}>
                        <Image style={styles.headImage} source={require('../assets/img/my/headimg.jpg')}></Image>
                        <View style={styles.headView}>
                            <View style={styles.headViewLine}>
                                <Text style={styles.headViewText}>Shuer</Text>
                                <Image style={styles.headViewIcon} source={avatar_enterprise_vip}></Image>
                            </View>
                            <View style={styles.headViewLine}>
                                <Text style={styles.headViewText}>个人信息</Text>
                                <Image style={styles.headViewIcon} source={home_arrow}></Image>
                            </View>
                        </View>
                    </View>
                    <Menu onTouch={this.menuTouch.bind(this)} menu={buttonlist}></Menu>
                </ScrollView>
            </View>
        )
    }
    menuTouch(arr) {
    }
}
const styles = StyleSheet.create({
    top: {
        backgroundColor: source.maincolor,
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    topicon: {
        height: 30,
        width: 30,
        marginLeft: 10,
        marginRight: 10,
    },
    header: {
        backgroundColor: source.maincolor,
        height: 150,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
    },
    headImage: {
        height: 110,
        width: 110,
        borderRadius: 55,
        borderColor: source.maincolorLight,
        borderWidth: 5,
        marginLeft: 20
    },
    headView: {
        flex: 1
    },
    headViewLine: {
        marginLeft: 20,
        marginTop: 3,
        marginBottom: 3,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    headViewText: {
        fontSize: 20,
        color: '#ffffff'
    },
    headViewIcon: {
        width: 20,
        height: 20
    }
})